<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<h2>Profiles</h2>
<div id="profile-alert-container"></div>
<div class="row">
	<div class="col-md-8">
		
		<div class="panel panel-default">
			<div class="panel-heading">
		        <a data-toggle="collapse" href="#profileListPanelBody">Profile list</a>
		          <div class="pull-right">
	                   <div class="btn-group">
	                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                           Actions
	                           <span class="caret"></span>
	                       </button>
	                       <ul class="dropdown-menu pull-right" role="menu">
	                       
	                           <li><a  id="addNewProfile"><i class="fa fa-plus fa-fw"></i>Add</a></li>
	                           <li><a  id="deleteProfile"><i class="fa fa-times fa-fw"></i>Delete</a></li>
	                           <li><a  id="testConnectionProfile"><i class="fa fa-bolt fa-fw"></i>Test Connection</a></li>
	                           <li><a  id="updateServerProfile"><i class="fa fa-download fa-fw"></i>Update Servers</a></li>
	                           <li><a  id="profileSettings"><i class="fa fa-cog fa-fw"></i>Settings</a></li>
	                       </ul>
	                  </div>
               </div>
		     </div>
		      <div id="profileListPanelBody" class="panel-collapse collapse in">
			     <div class="panel-body">
				 	<div class="table-responsive">
		     		 <table class="table table-striped table-bordered table-hover" id="profiles-table-list">
		     		 	<thead>
				            <tr>
				            	<th>id</th>
				                <th>Profile Name</th>
				                <th>Region</th>
				                <th>Hostname</th>
				                <th>Port</th>
				                <th>Type</th>
				                <th>Security</th>
				                <th>Username</th>
				            </tr>
				        </thead>
		       		 </table>
	   				</div>
			     </div>
			 </div>
		</div>
		<div id="profile-preference" ></div>
			
	</div>
	<div class="col-md-4">
		<div class="panel panel-default">
				<div class="panel-heading">
			       <i class="fa fa-tasks"></i> <a data-toggle="collapse" href="#profileRuntimePanelBody">Profile Runtime</a>
			     
			    </div>
			     <div id="profileRuntimePanelBody" class="panel-collapse collapse">
				    <div class="panel-body">
		    			<table id="profileRuntimeTable" class="table" >
		    					<thead>
		    						<tr>
		    							<th style="display:none;"></th>
		    							<th>Profile Name</th>
		    							<th>Start Time</th>
		    							<th>Status</th>
		    							<th></th>
		    						</tr>
		    					
		    					</thead>
		    					<tbody>
			   					</tbody>
		    					
		    			</table>
			  		 </div>
			   </div>
		</div>
		
		<div class="panel panel-default">
				<div class="panel-heading">
			       <i class="fa fa-tasks"></i> <a data-toggle="collapse" href="#taskStatusPanelBody">Task Status</a>
			    </div>
			     <div id="taskStatusPanelBody" class="panel-collapse collapse">
				    <div class="panel-body">
				    	
		    			<table id="taskStatusContainer" class="table" >
		    					<thead>
		    						<tr>
		    							<th></th>
		    							<th>Status</th>
		    							<th>Task</th>
		    							<th>Server Name</th>
		    							<th>Comments</th>
		    						</tr>
		    					
		    					</thead>
		    					<tbody>
			    				
		    					</tbody>
		    					
		    			</table>
			  		 </div>
			   </div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
		       <i class="fa fa-pencil-square-o"></i> <a data-toggle="collapse" href="#profileDetailPanelBody">Profile Details</a>     
		    </div>
		     <div id="profileDetailPanelBody" class="panel-collapse collapsein">
		   			 <div class="panel-body">
		    	<button type="button" id="profileSaveBtn" class="btn pull-right btn-primary">Save</button>
		    	<br>
		    	<form role="form" id="profileDetailsForm">
		    		
		    		<div class="form-group">
                        <label>Profile Name:</label>
                         <input id="id"  type="hidden" class="form-control"/>
                        <input id="profileName"  class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Region:</label>
                        <input id="region"  class="form-control" />
                        
                    </div>
                    <div class="form-group">
                        <label>Hostname:</label>
                        <input id="hostname"  class="form-control" />
                        
                    </div>
                     <div class="form-group">
                        <label>Port:</label>
                        <input id="port"  class="form-control" />
                        
                    </div>
                    <div class="form-group">
                        <label>URL:</label>
                        <input id="url"  class="form-control" />
                        <p class="help-block">e.g., /server-status for HTTP Server.</p>
                    </div>
                    <div class="form-group">
                        <label>Type:</label>
                       <select id="profileType" class="form-control">
                       	<option></option>
                       	<option>WebSphere</option>
                       	<option>HTTPServer</option>
                       	<option>Datapower</option>
                       </select>
                    </div>
                    <div class="form-group">
                        <label>Security:</label>
                        <select id="security" class="form-control">
                       	<option>false</option>
                       	<option>true</option>
                       </select>
                    </div> 
                    <div class="form-group">
                        <label>Username:</label>
                        <input id="username"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Password:</label>
                        <input id="password" type="password" class="form-control" />
                    </div>
                    
		    	</form>
		    </div>
			 </div>
		</div>
	</div>

</div>

<script>
    $(document).ready(function() {
        
       uft.loadProfilesData();
       var runtimeTimeData=uft.getProfileRuntime();
       var profileTable= $('#profiles-table-list').dataTable( {
	        data: uft.profilesData,
	        columns: [
	        	{ data: "id" ,"visible": false,},
	            { data: "profileName" },
	            { data: "region" },
	            { data: "hostname" },
	            { data: "port", "class": "center" },
	            { data: "profileType", "class": "center" },
	            { data: "security", "class": "center" },
	            { data: "username"}
	        ]
    	});
    	 if(!jQuery.isEmptyObject(runtimeTimeData)){
    	 	jQuery.each( runtimeTimeData, function( key, val ) {
    	 		var profileRuntime=$('<tr>', {
					 id:'profile'+val.id,
					 html: [	
					        
								$('<td>', {
									text: val.id,
									style: "display:none;"
								}),
								$('<td>', {
									text: val.profileName
								}),
								$('<td>', {
									text: uft.getDataFormat(val.startTime, "MM/DD/YY hh:mm A")
								}),
								$('<td>', {
									text: val.status
								}),
								$('<td>', {
									html:[ $('<button>', { 
										'class':'btn btn-primary btn-xs',
										 html:"<i class='glyphicon glyphicon-remove'></i>stop",
										 onClick:"uft.stopRuntimeProfile("+val.id+", 'profile-alert-container')"
										})
										]
								})
					       ]
				})
				$("#profileRuntimeTable > tbody:first").prepend(profileRuntime)
    	 	});
    	 }
    	$('#profiles-table-list tbody').on('click','tr', function () { 
    		if(!$(this).hasClass('selected')){
    			$( "#level-preference-panel" ).empty();
    			$("#profiles-table-list tbody tr").removeClass('selected');		
				$(this).addClass('selected');
    			var aPos = profileTable.fnGetPosition(this);
   		    	var aData = profileTable.fnGetData(aPos);
   		    	dwr.util.setValues(aData);
    		}
    	 });
        $( "#profileSaveBtn" ).click(function(){
        	var profile= uft.getEmptyProfile();
        	dwr.util.getValues(profile);
        	uft.saveOrUpdateProfile(profile);
        	profileTable.fnClearTable();
			profileTable.fnAddData(uft.profilesData);
			profileTable.fnDraw();
        	
        });
        $("#testConnectionProfile").click(function(){
       	 var id =dwr.util.getValue('id');
       	 if ( id != ""){
       	 	//uft.showWaitDialog()
       	 	uft.testProfileConnection(parseInt(id), "profile-alert-container");
       	 }
        })
        $("#updateServerProfile").click(function(){
        	 var id =dwr.util.getValue('id');
        	 var profileType= dwr.util.getValue('profileType');
        	 if( profileType == "WebSphere"){
        	 	 if ( id != ""){
		       	 	//uft.showWaitDialog()
		       	 	uft.updateServerProfile(parseInt(id), "profile-alert-container");
		       	 }
        	 }else{
        	 	uft.generateAlert("WARN: Update Servers is only applicable for WebSphere Profile", "profile-alert-container")
        	 }
       	
        })
        $( "#addNewProfile" ).click(function(){
        	var profile= uft.getEmptyProfile();
        	dwr.util.setValues(profile);
        });
        $( "#profileSettings" ).click(function(){
        	
        	var id =dwr.util.getValue('id');
        	if ( id != ""){
         		$("#profile-preference").load("jsp/preferences.jsp?profileId="+id);
        	}
        })
        $("#stopProfileRuntime").click(function(){
        
        })
         $( "#deleteProfile" ).click(function(){
         	var id =dwr.util.getValue('id');
         	if ( id != ""){
         		uft.deleteProfile(parseInt(id));
         		profileTable.fnClearTable();
         		var profilesList=uft.profilesData
         		if (profilesList.length > 0){
         			profileTable.fnAddData(profilesList);
					profileTable.fnDraw();
         		}
				
				var profile= uft.getEmptyProfile();
        		dwr.util.setValues(profile);
         	}else{
         		uft.generateAlert("WARN: Oops!. Please select a Profile to delete", "profile-alert-container");
         		
         	}
         	
         })
        uft.loadServerTasks();
       
    });
</script>